<template>
  <ElCard ref="hot" class="hot-item">
    <div class="title">近期热门项目</div>
    <section ref="main" class="hot-echarts"></section>
  </ElCard>
</template>

<script>
import _ from 'lodash';
import echarts from 'echarts';
import {http, catchAppError} from '@/util';
import url from '@/config';

export default {
  name: 'HotItem',
  data() {
    return {
      hotItem: []
    };
  },
  watch: {
    hotItem() {
      this.initEachrt();
    }
  },
  beforeMount() {
    http
      .post(url.hotItem)
      .then(res => {
        this.hotItem = res.splice(0, 5);
      })
      .catch(catchAppError);
  },
  methods: {
    initEachrt() {
      this.$refs.main.style.width = `${this.$refs.hot.clientWidth}px`;
      const myChart = echarts.init(this.$refs.main);
      const backgroundBar = _.fill(
        Array(this.hotItem.length),
        _.max(this.hotItem.map(res => res.num))
      );
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b1}: {c1}'
        },
        xAxis: {
          type: 'category',
          data: this.hotItem.map(res => res.item),
          axisLabel: {
            interval: 0,
            align: 'center',
            fontSize: 10
          }
        },
        grid: {bottom: 20, top: 10},
        yAxis: {
          type: 'value',
          splitLine: false
        },
        series: [
          {
            data: backgroundBar,
            itemStyle: {
              normal: {
                color: '#f6f8fd'
              }
            },
            barGap: '-100%',
            barWidth: '20px',
            barMaxWidth: '20px',
            type: 'bar'
          },
          {
            data: this.hotItem.map(res => res.num),
            itemStyle: {
              normal: {
                color: '#f4c463'
              }
            },
            barWidth: '20px',
            barMaxWidth: '20px',
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss">
.hot-item {
  .el-card__body {
    padding: 0;
    height: 220px;
  }
  .title {
    text-align: center;
    padding-top: 18px;
    font-size: 16px;
  }
  .hot-echarts {
    height: 130px;
    padding-bottom: 20px;
    padding-top: 10px;
  }
}
</style>
